﻿<CodeSnippetTabbed DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayout">
    <CodeSnippetTabPage Text="Razor">@(@"<DxFormLayout ItemSizeMode=""SizeMode"">
    <DxFormLayoutItem Caption=""Contact Name:"" ColSpanMd=""6"">
        <Template>
            <DxTextBox @bind-Text=""@Name""></DxTextBox>
        </Template>
    </DxFormLayoutItem>

    <DxFormLayoutItem Caption=""Email:"" ColSpanMd=""6"">
        <Template>
            <DxTextBox @bind-Text=""@Email""></DxTextBox>
        </Template>
    </DxFormLayoutItem>

    <DxFormLayoutItem Caption=""Birth Date:"" ColSpanMd=""6"">
        <Template>
            <DxDateEdit @bind-Date=""@BirthDate""></DxDateEdit>
        </Template>
    </DxFormLayoutItem>

    <DxFormLayoutItem Caption=""Years Worked:"" ColSpanMd=""6"">
        <Template>
            <DxSpinEdit @bind-Value=""@YearsWorked""></DxSpinEdit>
        </Template>
    </DxFormLayoutItem>

    <DxFormLayoutItem Caption=""On Vacation:"">
        <Template>
            <DxCheckBox @bind-Checked=""@OnVacation""></DxCheckBox>
        </Template>
    </DxFormLayoutItem>
</DxFormLayout>

@code {
    string Name { get; set; } = ""Nancy Davolio"";
    string Email { get; set; } = ""NancyDavolio@sample.com"";
    DateTime BirthDate { get; set; } = DateTime.Now.AddYears(-20);
    int YearsWorked { get; set; } = 3;
    bool OnVacation { get; set; } = true;
    SizeMode SizeMode { get; set; }
}")</CodeSnippetTabPage>
</CodeSnippetTabbed>
